<template>
  <div
    class="bg-red-600 text-white p-4 text-center border-rounded-2xl pos-fixed promotion-dialog"
    ref="removeBoxRef"
  >
    <div>
      <el-image src="./src/assets/Promotions/promotion.png"></el-image>
    </div>
    <div class="coupon">
      <div
        class="w-full h-[80%] rounded-lg flex items-center justify-center flex"
        style="background-color: #fff3f3"
      >
        <div class="flex text-gray-500 font-600 items-baseline border-r pr-3">
          <i class="text-4xl text-red-5">￥</i><span class="text-8xl text-red-5">3</span>
        </div>
        <div class="text-left pl-5">
          <span class="text-md text-white bg-red-500 inline-block px-2 py-1 rounded-sm"
            >满3.1减1</span
          >
          <p class="text-red-500 text-md mt-2">仅可购买粮油调味部分</p>
        </div>
      </div>
    </div>
    <div class="mt-10 px-15 pb-2">
      <el-button
        size="large"
        class="w-full"
        style="height: 52px; border-radius: 10px; background-color: #fff3f3"
      >
        <span class="text-2xl font-600">立即使用</span>
      </el-button>
      <span class="text-sm mt-2.5 block text-gray-100"> 有效时间：{{ endTime }} </span>
    </div>
    <!-- 定时关闭按钮 -->
    <div
      class="close-btn pos-absolute progress-circle"
      @click="$emit('close')"
      style="--progress: 10%"
    >
      <svg class="svg-progress" width="50" height="50" viewBox="0 0 50 50">
        <!-- 背景圆环 -->
        <circle
          class="progress-background"
          cx="25"
          cy="25"
          r="20"
          stroke="#e0e0e0"
          stroke-width="1"
          fill="none"
          stroke-dasharray="502.65"
        />

        <!-- 进度圆环 -->
        <circle
          class="progress-circle"
          cx="25"
          cy="25"
          r="20"
          stroke="var(--progress-color, #4caf50)"
          stroke-width="1"
          fill="none"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="offset"
          stroke-linecap="round"
        />
      </svg>
      <div
        class="pos-absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex justify-center items-center cursor-pointer"
        style="width: 36px; height: 36px"
      >
        <el-icon size="26" color="#ccc"><Close /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, watch } from "vue";
import { gsap } from "gsap";
import { Close } from "@element-plus/icons-vue";

const props = defineProps<{
  coordinates: { x: number; y: number };
}>();
const emits = defineEmits<{
  (e: "close"): void;
}>();

// gasp动画模块
const removeBoxRef = ref<HTMLDivElement | null>(null);
const endTime = ref("2023-05-01 00:00:00");
// 关闭倒计时动画模块
const color = ref("#fff");
const percent = ref(0);
let progressInterval: NodeJS.Timeout | null = null; // 保存定时器引用

// 计算属性：圆环周长（2πr，r=40）
const circumference = computed(() => 2 * Math.PI * 40);
// 计算属性：进度偏移量（控制进度显示）
const offset = computed(() => {
  return circumference.value - (percent.value / 100) * circumference.value;
});
// 清理定时器函数
const clearProgressInterval = () => {
  if (progressInterval) {
    clearInterval(progressInterval);
    progressInterval = null;
  }
};
// 开始进度更新（模拟）
const startProgress = () => {
  // 先清理可能存在的旧定时器
  clearProgressInterval();
  if (percent.value >= 100) return;
  progressInterval= setInterval(() => {
    percent.value += 1;
    if (percent.value >= 100) {
      animateBox();
      emits("close");
      clearProgressInterval(); // 完成时清理
    }
  }, 30); // 每20ms更新1%，约2秒完成
};
// 监听percent变化，更新CSS变量（用于动态颜色）
watch(
  () => color.value,
  (newColor) => {
    document.documentElement.style.setProperty("--progress-color", newColor);
  },
  { immediate: true }
);

// 动画函数
const animateBox = () => {
  console.log(props.coordinates);
  if (!removeBoxRef.value) return;
  const left = removeBoxRef.value.offsetLeft;
  const height = removeBoxRef.value.offsetHeight;
  const x = props.coordinates.x - left + 20;
  const y = props.coordinates.y - height - 20;
  gsap.to(removeBoxRef.value, {
    duration: 1,
    x: x,
    y: y,
    scale: 0,
    ease: "bounce.out",
  });
};
watch(
  () => props.coordinates,
  (newValue) => {
    console.log(newValue); percent.value = 0; // 重置进度
    startProgress();
  },
  { immediate: true }
);
onMounted(() => {});
</script>
<style lang="scss">
.promotion-dialog {
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 390px;
  z-index: 212;
}
.close-btn {
  width: 50px;
  height: 50px;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -18px;
  z-index: 214;
  transform: translateY(50px);
}
// 关闭进度

.coupon {
  /* 形状：圆角矩形（底部圆角更大） */
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  /* 颜色：红+白渐变背景（模拟“白色区域”效果） */
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 100%;
    background: #fff3f3;
    border-radius: 100%; /* 底部圆角更圆润 */
    z-index: -1;
  }
}
</style>
